import { useRef } from 'react';
import { Form, Radio, Switch, Select } from 'antd';
import { PlusCircleOutlined } from '@ant-design/icons';
import ButtonFields from '../components/ButtonFields';
import { addCustomButton } from '../../utils';

export default function OpButton(props: any) {
  const { form } = props;
  const buttonFieldsRef = useRef<any>();

  const op = (
    <div className='custom-title'>
      <div className='custom-title-text'>操作按钮</div>
      <div className='custom-title-extra' onClick={() => { addCustomButton(buttonFieldsRef) }}><PlusCircleOutlined style={{ color: 'var(--inbiz-color-primary)' }} />自定义按钮</div>
    </div>
  );

  return (
    <>
      <Form.Item label={op} name={['buttonSetting', 'actions']} className='bpmn-custom-properties-operation-button'>
        <ButtonFields type='firstTask' form={form} ref={buttonFieldsRef}/>
      </Form.Item>
      <Form.Item
        label='允许撤回'
        name={['buttonSetting', 'inWithDraw']}
        valuePropName='checked'
        hidden
      >
        <Switch />
      </Form.Item>
      <Form.Item
        label='撤回规则'
        name={['buttonSetting', 'withdrawRule']}
        hidden
      >
        <Radio.Group>
          <Radio value={'openWithdrawal'}>未结束撤回（只要流程还未结束时，就支持撤回）</Radio>
          <Radio value={'unapprovedWithdrawal'}>未审批撤回（只有流程还未进行审批时，才允许撤回）</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item
        label='手动催办'
        name={['senior', 'isUrge']}
        valuePropName='checked'
        hidden
      >
        <Switch />
      </Form.Item>
      <Form.Item
        label='手动催办间隔时长'
        name={['senior', 'urgingInterval']}
        valuePropName='checked'
        hidden
      >
        <Select
          options={[
            {
              value: 0.5,
              label: '30分钟',
            },
            {
              value: 1,
              label: '1个小时',
            },
            {
              value: 2,
              label: '2个小时',
            },
            {
              value: 24,
              label: '24小时',
            },
            // {
            //     value: '5',
            //     label: '不限',
            // },
          ]}
        />
      </Form.Item>
    </>
  );
}
